<template>
  <el-dialog class="edit-section-container"
             :visible.sync="visible"
             title="添加施工段"
             :close-on-click-modal="false"
             @close="dialogClose">
    <el-form :model="sectionListForm"
             label-width="100px">
      <el-form-item label="当前楼层">
        <el-input v-model="curFloor"
                  disabled>
        </el-input>
      </el-form-item>
      <el-form-item :label="index===0?'施工段':''"
                    v-for="(item, index) in sectionListForm.list"
                    :key="index">
        <el-input v-model="item.sectionName"
                  maxlength="8"
                  show-word-limit
                  class="col-9 section-item">

        </el-input>
        <i @click="addSection()"
           v-if="index===0 && dialogStatus==='create'"
           class="fa fa-plus-circle"></i>
        <i @click="removeSection(index)"
           v-if="index!==0 && dialogStatus==='create'"
           class="fa fa-minus-circle"></i>
      </el-form-item>
    </el-form>
    <div slot="footer"
         class="dialog-footer">
      <el-button @click="dialogClose">取 消</el-button>
      <el-button @click="editSection"
                 type="primary">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { monitorPublicApi } from '@/services/ProjectCenter'
export default {
  data () {
    return {
      visible: false,
      // 施工段列表
      sectionListForm: {
        floor: '1#-3',
        list: [
          { sectionName: '', id: 1 },

        ]
      },
      submitForm: {
        wbs_id: '',
        consName: '',
        project_id: ''
      }
    }
  },
  props: {
    dialogVisible: {
      type: Boolean
    },
    dialogStatus: {
      type: String,
      default: 'create'
    },
    dialogForm: {
      type: Object
    },
    callback: {
      type: Function
    },
    curFloor: {
      type: String
    }
  },
  watch: {
    dialogVisible (newval, oldval) {
      this.visible = newval
    },
    dialogForm: {
      handler (newval, oldval) {
        this.submitForm = JSON.parse(JSON.stringify(newval))
        if (this.dialogStatus === 'update') {
          this.sectionListForm.list[0].sectionName = this.submitForm.section_name
        }
        console.log(newval, 'watch')
      },
      deep: true
    }
  },
  methods: {
    dialogClose () {
      this.sectionListForm.list = [{ sectionName: '', id: 1 }]
      this.submitForm = {
        wbs_id: '',
        consName: '',
        project_id: ''
      }
      this.$emit('update:dialogVisible', false)
    },
    // 根据状态调用添加或移除方法
    editSection () {
      let flag = false
      this.sectionListForm.list.map((item) => {
        if (item.sectionName.trim() === '') flag = true
      })
      if (flag) {
        this.$message.warning('施工段名称必传')
      } else {
        if (this.dialogStatus === 'create') {
          this.createSection()
        } else {
          this.updateSection()
        }
      }

    },
    // 添加施工段
    createSection () {
      let consName = this.sectionListForm.list.reduce((acc, cur) => {
        return acc += cur.sectionName + ','
      }, '')
      consName = consName.substr(0, consName.length - 1)
      this.submitForm.section_name = consName
      monitorPublicApi.createConstruction({
        data: this.submitForm
      }).then(res => {
        if (res.code === 0) {
          this.$message.success('添加施工段成功')
          this.dialogClose()
          this.$emit('callback', '')
        } else {
          this.$message.warning(res.msg)
        }
      })

    },
    // 修改施工段
    updateSection () {
      let section_name = this.sectionListForm.list[0].sectionName
      this.submitForm.section_name = section_name
      console.log('this.submitForm', this.submitForm)
      monitorPublicApi.updateConstruction({
        data: this.submitForm
      }).then(res => {
        if (res.code === 0) {
          this.$message.success('修改施工段成功')
          this.dialogClose()
          this.$emit('callback', '')
        } else {
          this.$message.warning(res.msg)
        }
      })
    },
    addSection () {
      if (this.sectionListForm.list.length >= 5) {
        return false
      }
      this.sectionListForm.list.push(
        {
          sectionName: ''
        }
      )
    },
    // 移除施工段
    removeSection (index) {
      this.sectionListForm.list.splice(index, 1)
    }
  },
  created () {
  },
  mounted () {
  }
}
</script>
<style scoped lang='scss'>
.edit-section-container {
  .fa {
    font-size: 20px;
    cursor: pointer;
  }
}
</style>
